<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import {TopRight} from "@element-plus/icons-vue";

let arr = ref(["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ab154e0b22328e20bbb7890a4327d23.jpg?w=2452&h=920",
  "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/027dedf7486746ca8b768923c28b76c5.png?thumb=1&w=1533&h=575&f=webp&q=90",
  "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ed3523f3e793e7ef6de7c1cc351ae48d.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
  "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6247cf7c482d552386a5e7cda8c8cda9.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
  "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4ffb73a53f05b6b8d864fa8260c7809e.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
  "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6af2e2604515ad0e01b5fc7e7cedbd52.jpg?thumb=1&w=1533&h=575&f=webp&q=90"]);
let currentIndex = ref(0);
let timer = null;//定时器
// 自动轮播
const startAutoPlay = () => {
  timer = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % arr.value.length;
  }, 3000); // 每3秒切换一次图片
};

const stopAutoPlay = () => {
  clearInterval(timer);
};

const click1 = (index) => {
  currentIndex.value = index;
  stopAutoPlay(); // 点击时停止自动轮播
  startAutoPlay(); // 重新启动自动轮播
};

onMounted(() => {
  startAutoPlay();
});

onBeforeUnmount(() => {
  stopAutoPlay();
});


</script>

<template>
  <h1>欢迎来到十方智育管理系统！</h1>
  <div class="big-body">

    <img
        v-for="(url, index) in arr"
        :key="index"
        :src="url" alt=""
        v-bind:class="{img:true, Img :currentIndex === index}"
    >
    <ul>
      <li v-for="(item, index) in arr"
          :key="index"
          class="button"
          v-bind:class="{button:true, Button: currentIndex === index}"
          v-on:mouseenter="click1(index)">
      </li>
    </ul>
  </div>
  <h2>这里是一个首页轮播图占位</h2>
  <el-icon style="font-size: 30px"><TopRight /></el-icon>

</template>

<style scoped>
h2{
  display: inline-block;
}
.big-body{
  width: 1226px;
  height: 460px;
  margin: 40px auto;
  position: relative;
}
.img{
  position: absolute;
  width: 1226px;
  height: 460px;
  opacity: 0;
  transition: opacity 0.3s;
}
.Img{
  position: absolute;
  width: 1226px;
  height: 460px;
  opacity: 1;
  transition: opacity 0.3s;
}
.big-body ul{
  position: absolute;
  width: 106px;
  height: 10px;
  display: flex;
  justify-content: space-between;
  bottom: 12px;
  left: 67px;
}
.button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
}
.Button{
  width: 16px;
  height: 10px;
  background-color: red;
  border-radius: 35%;
}
</style>